<script setup lang="ts">
import {getCurrentInstance, onMounted, provide, ref} from "vue";
import loadComponent from "@/view/activity/components/loading.vue";
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
import html2canvas from "html2canvas";
import domtoimage from 'dom-to-image';
import {showToast} from "vant";
let loading = ref(false)
provide('loading',loading)
const {proxy} = getCurrentInstance() as any; // 类似于this
let toBack=()=>{
  proxy.$router.go(-1)
}
let invite_code = ref('')
let upInvited = async (val,type)=>{
  loading.value = true
  await proxy.$API.User.upInvited({token: localStorage.getItem('token'),activinvite_code:invite_code.value}).then(res => {
    if(res.code==200){
      showToast('领取成功')
    }else {
      showToast(res.remark)
      invite_code.value = ''
    }
    loading.value = false
  })
}
</script>

<template>
  <div class="invited">
    <loadComponent></loadComponent>
    <img alt="" class="back" src="@/assets/images/activityImg/back.png" @click="toBack">
    <div class="img1"></div>
    <div class="img2"></div>
    <div class="img3">
      <div class="box">
        <div class="title">输入好友邀请码</div>
        <input type="text" v-model="invite_code" class="input" maxlength="6">
        <div class="btm" @click="upInvited">
          确认填写
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.invited::-webkit-scrollbar {
  width: 0;
}
.invited{
  width: 100% ;
  height: auto;
  min-height: 900px;
  background-color:#4957F5;
  background-image: url("@/assets/images/invited/bg.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
  position: relative;
  overflow: hidden;
  overflow-y: scroll;
  .back {
    width: 20px;
    height: 25px;
    position: absolute;
    left: 20px;
    top: 31px;
    z-index: 11;
  }
  .img1{
    width: 146px;
    height: 29px;
    position: absolute;
    top:64px;
    left:calc(50% - 73px);
    background-image: url("@/assets/images/invited/img1.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  .img2{
    width:249px;
    height: 267px;
    position: absolute;
    top:120px;
    left:calc(50% - 125px);
    background-image: url("@/assets/images/invited/img2.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  .img3{
    width:358px;
    height: 197px;
    position: absolute;
    top:371px;
    left:calc(50% - 179px);
    //background-image: url("@/assets/images/invited/img2.png");
    //background-repeat: no-repeat;
    background-image: linear-gradient(to right ,#4A9AFF,#2F66EE);
    border-radius: 20px;
    font-size: 15px;
    overflow: hidden;
    .box{
      width: 100%;
      height: 100%;
      overflow: hidden;
      .title{
        width: 100%;
        height: 15px;
        margin: 15px 0 0 30px;
        font-family: txtP, "Microsoft YaHei", sans-serif;
        color: white;
      }
      .input{
        width: 332px;
        display: block;
        margin: 10px auto 13px;
        height: 54px;
        border: 2px solid white;
        //background-color: #281A90;
        border-radius: 100px;
        text-align: center;
        font-family: txtP, "Microsoft YaHei", sans-serif;
        font-weight: normal;
        font-size: 28px;
        background-image: linear-gradient(to right , #281A90,#2F66EE);
        color: #FEFEFE;
        letter-spacing: 10px;
        line-height: 21px;
      }
      .btm{
        width: 192px;
        height: 68px;
        background-image: url("@/assets/images/invited/btm.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        font-weight: 400;
        font-size: 18px;
        color: #FEFEFE;
        line-height: 21px;
        text-shadow: 0px 0px 9px rgba(75,123,235,0.6);
        margin:  0 auto;
      }
    }
    //background-size: 100% auto;
  }
}
</style>
